<template>
  <div class="list-content">
    <div class="filter-area">
      <div class="operate-area">
        <el-button @click="exp" plain type="success" size="mini"
          >导出</el-button
        >
      </div>
    </div>
    <div class="table-title">
      <span></span>
      <h5>单品销售统计列表</h5>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="mini"
      v-if="hackReset"
    >
      <el-table-column type="index" width="50" align="center">
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center">
      </el-table-column>
      <el-table-column
        prop="specificationName"
        label="商品规格名称"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="specificationType"
        label="商品规格类型"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="categoryName" label="商品分类" align="center">
      </el-table-column>
      <el-table-column prop="salesAmount" label="销售量" align="center">
      </el-table-column>
      <el-table-column prop="writeoffAmount" label="核销笔数" align="center">
      </el-table-column>
      <el-table-column
        prop="salesMoneyAmount"
        label="销售金额(元)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="salesProportion"
        label="销售数量占比"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="venueFloor" label="楼层" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.venueFloor | floorFilter }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <page
      :nowPage="nowPage"
      :total="total"
      :limit="limit"
      @pageChange="onPageChange"
      @sizeChange="onSizeChange"
      v-if="pageReset"
    />
  </div>
</template>
<script>
import page from "@c/page";
import { productStatisticsApi, exportExcelProductStatisticsApi } from "@s/api";
import { FLOOROBJ } from "@u/wordbook";
export default {
  name: "tableCom",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      pageReset: true,
      hackReset: true,
      tableData: []
    };
  },
  props: ["tableFrom"],
  components: {
    page
  },
  filters: {
    floorFilter(val) {
      return FLOOROBJ[val];
    }
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    exp() {
      let json = JSON.parse(this.tableFrom);
      delete json.i;
      exportExcelProductStatisticsApi(json, "特许商品单品销售统计信息表").then(
        () => {}
      );
    },
    getInitList() {
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    getList() {
      let json = JSON.parse(this.tableFrom);
      delete json.i;
      json.limit = this.limit;
      json.page = this.nowPage;
      productStatisticsApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.tableData = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    }
  },
  watch: {
    tableFrom(val) {
      if (val) {
        this.getInitList();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.list-content {
  margin: 0px !important;
}
</style>
